<template>
  <!-- tab 容器 -->
  <div class="content-wrap">
    <div class="tab-wrap">
      <el-radio-group v-model="tabValue">
        <el-radio-button v-for="item in tabsList" :key="item.value" :label="item.value">
          <template #default>
            {{ item.name }}
            <span v-if="item.value == 0">
              ({{
                privateTableDataNum +
                stockUpTableDataNum +
                notPostedTableDataNum +
                unmatchedTableDataNum
              }})
            </span>
            <span v-if="item.value == 1">({{ privateTableDataNum }})</span>
            <span v-if="item.value == 2">({{ stockUpTableDataNum }})</span>
            <span v-if="item.value == 3">({{ unmatchedTableDataNum }})</span>
            <span v-if="item.value == 4">({{ mailTableDataNum }})</span>
            <span v-if="item.value == 5">({{ notPostedTableDataNum }})</span>
          </template>
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- <PrivateLibraryView
      :fileId="props.fileId"
      @getTableData="getTableData"
      ref="privateRef"
      :bomData="privateTableData"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getPrivateTotal="getPrivateTotal"
      @openModal="openModal"
      :tabValue="tabValue"
      v-if="tabValue == 1"
    /> -->
    <StockUpView
      ref="stockUpRef"
      :bomData="stockUpTableData"
      @getTableData="getTableData"
      :fileId="props.fileId"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getStockUpTotal="getStockUpTotal"
      v-if="tabValue == 2"
      :tabValue="tabValue"
      :showOperation="props.showOperation"
    />
    <Unmatched
      ref="unmatchedRef"
      :fileId="props.fileId"
      @getTableData="getTableData"
      :bomData="unmatchedTableData"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getUnmatchedTotal="getUnmatchedTotal"
      v-if="tabValue == 3"
      :tabValue="tabValue"
      :showOperation="props.showOperation"
    />
    <!-- <MailView
      ref="mailRef"
      :fileId="props.fileId"
      @getTableData="getTableData"
      :bomData="mailTableData"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getMailTotal="getMailTotal"
      v-if="tabValue == 4"
      :tabValue="tabValue"
    /> -->
    <NotAttached
      ref="notPostedRef"
      :fileId="props.fileId"
      @getTableData="getTableData"
      :bomData="notPostedTableData"
      @getAlldata="getAlldata"
      @getStatisticalData="getStatisticalData"
      @getNotPostedTotal="getNotPostedTotal"
      v-if="tabValue == 5"
      :tabValue="tabValue"
      :showOperation="props.showOperation"
    />
    <div v-show="tabValue == 0">
      <!-- <PrivateLibraryView
        ref="privateRef"
        :fileId="props.fileId"
        @getTableData="getTableData"
        :bomData="privateTableData"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getPrivateTotal="getPrivateTotal"
        @openModal="openModal"
        :tabValue="tabValue"
      /> -->
      <StockUpView
        ref="stockUpRef"
        @getTableData="getTableData"
        :bomData="stockUpTableData"
        :fileId="props.fileId"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getStockUpTotal="getStockUpTotal"
        :tabValue="tabValue"
        :showOperation="props.showOperation"
      />
      <Unmatched
        ref="unmatchedRef"
        :fileId="props.fileId"
        @getTableData="getTableData"
        :bomData="unmatchedTableData"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getUnmatchedTotal="getUnmatchedTotal"
        :tabValue="tabValue"
        :showOperation="props.showOperation"
      />
      <!-- <MailView
        ref="mailRef"
        :fileId="props.fileId"
        @getTableData="getTableData"
        :bomData="mailTableData"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getMailTotal="getMailTotal"
        :tabValue="tabValue"
      /> -->
      <NotAttached
        ref="notPostedRef"
        :fileId="props.fileId"
        @getTableData="getTableData"
        :bomData="notPostedTableData"
        @getAlldata="getAlldata"
        @getStatisticalData="getStatisticalData"
        @getNotPostedTotal="getNotPostedTotal"
        :tabValue="tabValue"
        :showOperation="props.showOperation"
      />
    </div>
  </div>
</template>
<script setup>
import { MailView, NotAttached, PrivateLibraryView, StockUpView, Unmatched } from '../TabViews';
import { ref, reactive, computed } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const tabValue = ref(0);

let privateTableData = reactive([]); // 私有
let stockUpTableData = reactive([]); // IBE
let unmatchedTableData = reactive([]); // 未匹配
let mailTableData = reactive([]); // 邮寄
let notPostedTableData = reactive([]); // 不贴

let privateRef = ref();
let stockUpRef = ref();
let unmatchedRef = ref();
let mailRef = ref();
let notPostedRef = ref();

let privateTableDataNum = ref(0);
let stockUpTableDataNum = ref(0);
let unmatchedTableDataNum = ref(0);
let mailTableDataNum = ref(0);
let notPostedTableDataNum = ref(0);
let allTotal = ref(0);
allTotal.value =
  Number(privateTableDataNum.value) +
  Number(stockUpTableDataNum.value) +
  Number(unmatchedTableDataNum.value) +
  Number(mailTableDataNum.value) +
  Number(notPostedTableDataNum.value);

const tabsList = computed(() => [
  {
    name: t('om.All'),
    value: 0,
    num: allTotal.value,
  },
  // {
  //   name: t('menu.privateInventory'),
  //   value: 1,
  //   num: privateTableDataNum.value,
  // },
  {
    name: t('om.IBEstocking'),
    value: 2,
    num: stockUpTableDataNum.value,
  },
  {
    name: t('om.Unmatched'),
    value: 3,
    num: unmatchedTableDataNum.value,
  },
  // {
  //   name: t('om.Postagerequired'),
  //   value: 4,
  //   num: mailTableDataNum.value,
  // },
  {
    name: t('om.Notsticker'),
    value: 5,
    num: notPostedTableDataNum.value,
  },
]);

const props = defineProps({
  fileId: {
    type: String,
    default: '',
  },
  showOperation: {
    type: Boolean,
    default: true,
  },
});

/**
 * 获取更新数据
 */
const getAlldata = () => {
  // privateRef.value.getPrivateTableData(1, 10);
  stockUpRef.value.getStockUpTableData(1, 10);
  unmatchedRef.value.getUnmatchedTableData(1, 10);
  // mailRef.value.getMailTableData(1, 10);
  notPostedRef.value.getNotPostedTableData(1, 10);
};

/**
 * 获取私有库存表格数据
 * @param {*} current
 * @param {*} pageSize
 */
const getPrivateTotal = (total) => {
  privateTableDataNum.value = Number(total);
};

/**
 * 获取IBE备货表格数据
 * @param {*} current
 * @param {*} pageSize
 */
const getStockUpTotal = (total) => {
  stockUpTableDataNum.value = Number(total);
};

/**
 * 获取未匹配表格数据
 * @param {*} current
 * @param {*} pageSize
 */
const getUnmatchedTotal = (total) => {
  unmatchedTableDataNum.value = Number(total);
};

/**
 * 获取需邮寄表格数据
 * @param {*} current
 * @param {*} pageSize
 */
const getMailTotal = (total) => {
  mailTableDataNum.value = Number(total);
};

/**
 * 获取不贴表格数据
 * @param {*} current
 * @param {*} pageSize
 */
const getNotPostedTotal = (total) => {
  notPostedTableDataNum.value = Number(total);
};

/**
 * 表格请求数据
 */
const getTableData = (tableData) => {
  tableData.records.forEach((item) => {
    item.designatorLength = item.designator.split(',').length;
    item.recommendedComponents = {
      stock: item.stock,
      supplierName: item.supplierName,
      supplierPn: item.manufacturerPn,
      supplyQuantity: item.supplyQuantity,
    };
    item.dosage = item.quantity * item.smtNumber;
  });
};
</script>
